<template>
  <div class="map-page">
    <!-- 地图容器 -->
    <div id="container"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

// 声明全局变量
declare global {
  interface Window {
    TMap: any
  }
}

let map: any = null

// 组件挂载时初始化地图
onMounted(() => {
  // 确保腾讯地图API已加载
  const checkTMap = setInterval(() => {
    if (typeof window.TMap !== 'undefined') {
      clearInterval(checkTMap)
      initMap()
    }
  }, 100)
})

//地图初始化函数
function initMap() {
  try {
    //定义地图中心点坐标（北京）
    var center = new window.TMap.LatLng(39.984120, 116.307484)
    //定义map变量，调用 TMap.Map() 构造函数创建地图
    map = new window.TMap.Map(document.getElementById('container'), {
      center: center,     //设置地图中心点坐标
      zoom: 17.2,         //设置地图缩放级别
      pitch: 43.5,        //设置俯仰角
      rotation: 45        //设置地图旋转角度
    })

    console.log('腾讯地图初始化成功')
  } catch (error) {
    console.error('腾讯地图初始化失败:', error)
  }
}
</script>

<style scoped lang="less">
.map-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow: hidden; // 防止页面滚动
}

#container {
  flex: 1;
  width: 100%;
  height: 100%;
}

// 防止页面滚动的各种CSS技巧
html, body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

// 确保地图容器不会产生滚动
#container {
  touch-action: none;
  user-select: none;
}
</style>